import styles from '../styles/Home.module.css'
import BasicLayout from '../layouts/BasicLayout'
import dynamic from 'next/dynamic'
import axios from 'axios'
import { queryUserList, queryOrderList, delUserItem } from '../api'
import { useState, useEffect } from 'react';
import { Table, Button } from 'antd';
//异步组件
const DetailItem = dynamic(() => import('../components/exampleList1/DetailItem'))

function Page({ dataList1, dataList2, dataItem }) {
	const [data, setData] = useState({ hits: [] });
	
	const findDetailItem = async (item) => {
		const res1 = await delUserItem(item);
		const content1 = await res1.json()
		console.log(item, content1);
	}
	const tableHead2 = [
		{
			title: '订单号',
			dataIndex: 'orderId',
			key: '1',
		},
		{
			title: '订单状态',
			dataIndex: 'orderStatus',
			key: '2',
		},
		{
			title: '总价',
			dataIndex: 'totalPrices',
			key: '3',
		},
		{
			title: 'Action',
			dataIndex: '',
			key: '4',
			render: (row) => {
				return (<Button onClick={() => {findDetailItem(row)}} type='link'>详情</Button>)
			},
		},
	];
	return (
		<BasicLayout className={styles.container}>
			{dataList1.map((item) => {
				return (<div key={item.primaryId}>{item.nickName}</div>);
			})}
			<DetailItem></DetailItem>
			<Table dataSource={dataList2} columns={tableHead2} rowKey={columns => columns.primaryId} />
		</BasicLayout>
	)
}

export async function getStaticProps() {
	const res1 = await queryUserList();//await fetch(`http://localhost:8080/user/queryUserList.do`)
	const res2 =  await queryOrderList();//await fetch(`http://localhost:8080/order/queryOrderList.do`)
	const content1 = await res1.json()
	const content2 = await res2.json()
	return { 
		props: {
		    dataList1: content1.data || [], 
		    dataList2: content2.data || [], 
		}
	}
}

export default Page;